<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p id="ccc">点按钮改变颜色</p>
    <button onclick="changeColor()">点我改变颜色</button>
    <p>点击按钮，在BODY的第一个子元素之前插入一个新的H3元素:</p>
    <button onclick="myFunc()">点我试试</button>
    <button onclick="myFunc2()">点我删除</button>

    <script>
      //改变HTML内容  改变输出流都写过了
      //改变属性的值(原生属性)
      function changeColor() {
        var x1 = document.getElementById("ccc");
        x1.style.color = "red";
      }

      function myFunc() {
        //创建一个新的h3元素
        var newElem = document.createElement("h3");
        // 给它一些内容
        var newContent = document.createTextNode("嗨，大家好!");
        //将文本节点添加到新创建的h3
        newElem.appendChild(newContent);

        // Get the Body
        var body = document.body;
        // 在BODY的第一个子元素之前插入H3
        body.insertBefore(newElem, body.childNodes[0]);
      }

      function myFunc2() {
        //从DOM中删除现有元素
        var div = document.body;
        div.removeChild(div.childNodes[0]);
      }
    </script>
  </body>
</html>
